import React,{useEffect, useState} from 'react';
// 使用的是echarts-for-react封装的插件
import ReactECharts from 'echarts-for-react';
import '../style/Echarts.scss'
function Echarts(props) {
    var [option, setEoption] = useState({})
    // 自己定义的数据,title名字,图的类型 折线是line、柱状图是bar.
    var titlelist = JSON.parse(JSON.stringify(props.titlelist))
    // 请求回来的数据 有name x轴数据
    var datalist = JSON.parse(JSON.stringify(props.datalist)) 
    console.log("datalist",datalist[0])
    useEffect(()=>{
        setEoption({
            title: {
                text: titlelist.name,
                left: 'center'
            },
            legend: {
                data: [datalist[0].datas[0].name, datalist[0].datas[1]&&datalist[0].datas[1].name],
                top: 30
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                // x轴的数据
                data: null||datalist[0].xAxis
            },
            yAxis: {
                type: 'value'
            },
            // 定义的数据列表
            series: [
                
                {
                    name: datalist[0].datas[0].name,
                    // 图的类型
                    type: titlelist.type[0],
                    // stack: 'Total',
                    data:datalist[0].datas[0].data,
                    label: { show: true, position: 'top' }
                },
                {
                    name: datalist[0].datas[1]&&datalist[0].datas[1].name,
                    type: titlelist.type[1]&&titlelist.type[1],
                    // stack: 'Total',
                    data: datalist[0].datas[1]&&datalist[0].datas[1].data,
                    label: { show: true, position: 'top' }
                }
            ]
        })
    },[])
    return (
        <div className='echarts'>
             <ReactECharts option={option} className="charts" />
        </div>
    );
}

export default Echarts;